<!DOCTYPE html>
<html>
<head>
    <title>表格范例</title>
    <meta http-equiv = 'content-type' content = 'text/html; charset=utf-8' />
    <link href = '../css/jquery-ui-1.10.3.custom.min.css' rel = 'stylesheet'>
    <link href = '../css/lion.css' rel = 'stylesheet'>
    <script type = 'text/javascript' src = 'jquery-1.12.4.min.js'></script>
    <script type = 'text/javascript' src = '../js/lion.js'></script>
    <script type = "text/javascript">
        jQuery(function($) {
            var data = [];
            for (var i = 1; i <= 11; i++) {
                data.push({
                    id : i,
                    name : 'name' + i,
                    sex : 1,
                    remark : '备注' + i
                });
            }

            $('#myDataTable').table({
                title : '表格范例',
                tool : [
                    {icon: 'ui-icon-plus',name: '新增',click: function (t) {
                        var _ = $('#editForm').clone();
                        $.win({title:'新增',height:150,drag:true,content:_.show(),load:function() {
                            var txts = $(':text', _);
                            $(txts[0]).val(data.length + 1).focus();
                            var btns = $('button', _);
                            $(btns[0]).click(function() {
                                data.push({id:$(txts[0]).val(), name:$(txts[1]).val(), sex:$('select', _).val() - 0, remark:$(txts[2]).val()});
                                t.refresh(data);
                                $.close('新增');
                            });
                            $(btns[1]).click(function() {$.close('新增');});
                        }});
                    }},
                    {icon: 'ui-icon-pencil',name: '编辑',click: function (t) {
                        var d = t.getCurrentRow();
                        if (d) {
                            var _ = $('#editForm').clone(), _title = d.name;
                            $.win({title:'编辑 [' + _title + ']',height:150,drag:true,content:_.show(),load:function() {
                                var txts = $(':text', _);
                                $(txts[0]).val(d['id']);
                                $(txts[1]).val(d['name']);
                                $(txts[2]).val(d['remark']);
                                $('select', _).val(d['sex']);
                                var btns = $('button', _);
                                $(btns[0]).click(function() {
                                    for (var i = 0; i < data.length; i++) {
                                        if (data[i]['id'] - 0 === d['id'] - 0) {
                                            data[i]['name'] = $(txts[1]).val();
                                            data[i]['sex'] = $('select', _).val() - 0;
                                            data[i]['remark'] = $(txts[2]).val();
                                            break;
                                        }
                                    }
                                    t.refresh(data);
                                    $.close('编辑 [' + _title + ']');
                                });
                                $(btns[1]).click(function() {$.close('编辑 [' + _title + ']');});
                            }});
                        } else {
                            $.warn('您还没勾选任何数据!');
                        }
                    }},
                    {icon: 'ui-icon-trash',name: '删除',click: function (t) {
                        var _ = t.getTableSelIds() + '';
                        if (_.length > 0) {
                            $.confirm('您确定要删除所选数据吗?', function() {
                                _ = _.split(',');
                                $.each(_, function(j, o) {
                                    for (var i = 0; i < data.length; i++) {
                                        if (data[i]['id'] - 0 === o - 0) {
                                            data.splice(i, 1);
                                            break;
                                        }
                                    }
                                });
                                t.refresh(data);
                            });
                        } else {
                            $.warn('您还没选择任何数据!');
                        }
                    }}
                ],
                head : [
                    {col : '选择', name : 'id', width : '5%', align : 'center', checkbox : true},//radio : true
                    {col : '序号', name : 'id', width : '5%', align : 'center'},
                    {col : '姓名', name : 'name', width : '10%', align : 'center'},
                    {col : '性别', name : 'sex', width : '5%', align : 'center', replace : function(d) {return d['sex'] ? '男' : '女';}},
                    {col : '说明', name : 'remark', width : '75%', align : 'left'}
                ],

                page : {size : 10},

                data : data
            });

            $('#btnDataQry').click(function() {
                var _ = $('#myDataTable');
                //_.data('_lion_table_cfg')['data'] = data;
                _.setTableParam($('#qryDataForm')/*, true*/).refresh(1);//第二个参数 为全匹配模式, 默认为like模式
            });
        });
    </script>
</head>

<body>
<div class = 'layout-all'>
    <div id = 'center' class = 'center' style = 'overflow:auto'>
        <div style = 'position:relative;width:1000px;margin:0 auto'>
            <div id = 'myDataQryBar' class = 'ui-note' style = 'margin-bottom:10px'>
                <div class = 'ui-note-title' icon = 'ui-icon-search'>查询</div>
                <div class = 'ui-note-content' style = 'text-indent:25px'>
                    <form id = 'qryDataForm'>
                        <p style = 'padding:5px 0'>
                            名称: <input name = 'name' type = 'text' style = 'width:50px' />
                            <button id = 'btnDataQry' type = 'button' class = 'button ui-icon-search'>查询</button>
                        </p>
                    </form>
                </div>
            </div>
            <div id = 'myDataTable'></div>
            <div id = 'editForm' style = 'display:none'>
                <form class = 'form' method = 'post' action = ''>
                    <table class = 'table'>
                        <tr>
                            <th class = 'th' style = 'width:20%'>ID</th>
                            <td class = 'td' style = 'width:30%'>
                                <input class = 'input' type = 'text' style = 'padding-left:5px' readonly />
                            </td>
                            <th class = 'th' style = 'width:20%'>姓名</th>
                            <td class = 'td' style = 'width:30%'>
                                <input class = 'input' type = 'text' style = 'padding-left:5px' />
                            </td>
                        </tr>
                        <tr>
                            <th class = 'th'>性别</th>
                            <td class = 'td'>
                                <select class = 'select'>
                                    <option value = 1>男</option>
                                    <option value = 0>女</option>
                                </select>
                            </td>
                            <th class = 'th'>备注</th>
                            <td class = 'td'>
                                <input class = 'input' type = 'text' style = 'padding-left:5px' />
                            </td>
                        </tr>
                    </table>
                    <div style = 'text-align:center;margin-top:5px'>
                        <button type = 'button' class = 'button ui-icon-disk'>保存</button>
                        <button type = 'button' class = 'button ui-icon-close'>关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>